<template>
  <div class="yl-container">
    <div class="yl-table-list">
      <el-table
        v-loading="loading"
        element-loading-text="玩命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        row-key="nns_code"
        default-expand-all
        :tree-props="{ children: 'nns_children' }"
        :data="tableData"
        height="700"
      >
        <el-table-column label="项目编号" prop="nns_code" width="200" show-overflow-tooltip></el-table-column>

        <el-table-column label="项目名字" prop="nns_name" show-overflow-tooltip></el-table-column>

        <el-table-column label="项目类型" align="center">
          <template slot-scope="{row}">
            <span v-if="row.nns_kind === 1">行政</span>
            <span v-else-if="row.nns_kind === 2">教学</span>
            <span v-else>通用</span>
          </template>
        </el-table-column>

        <el-table-column label="项目所属状态个数" align="center">
          <el-table-column label="待提交" align="center" prop="nns_no_submit_num"></el-table-column>
          <el-table-column label="待审核" align="center" prop="nns_wait_audit_num"></el-table-column>
          <el-table-column label="审核中" align="center" prop="nns_auditing_num"></el-table-column>
          <el-table-column label="通过" align="center" prop="nns_pass_num"></el-table-column>
          <el-table-column label="驳回" align="center" prop="nns_reject_num"></el-table-column>
        </el-table-column>

        <el-table-column label="金额" show-overflow-tooltip >
          <template slot-scope="{row}">
            <span>{{ row.nns_money | formatMoney('yuan') }}</span>
          </template>
        </el-table-column>

        <el-table-column label="审核状态" align="center">
          <template slot-scope="{row}">
            <span v-if="row.nns_state === 0" class="warning">待提交</span>
            <span v-else-if="row.nns_state === 1" class="warning">待审核</span>
            <span v-else-if="row.nns_state === 2" class="primary">一审通过</span>
            <span v-else-if="row.nns_state === 3" class="success">二审通过</span>
            <span v-else-if="row.nns_state === 4" class="success">三审通过</span>
            <span v-else-if="row.nns_state === 5" class="danger">已驳回</span>
            <span v-else-if="row.nns_state === 6" class="info">已取消</span>
            <span v-else></span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="{row}" v-if="canWrite">
            <template v-if="row.nns_is_final === 1 && row.nns_is_template === 1">
              <YlButton
                uiType="main"
                @click="toWritePage(row)"
              >
                <span>填报</span>
              </YlButton>
            </template>

            <template v-if="row.nns_is_template === 0">
               <YlButton
                uiType="main"
                v-if="row.nns_state === 0"
                @click="handleMethod(row.nns_id, 1)"
              >
                <span>提交</span>
              </YlButton>

              <YlButton
                uiType="main"
                btnType="warning"
                v-if="row.nns_state === 1"
                @click="handleMethod(row.nns_id, 0)"
              >
                <span>撤回</span>
              </YlButton>

              <YlButton
                uiType="main"
                btnType="success"
                v-if="canWrite === true && row.nns_state === 0  || row.nns_state === 5"
                @click="handleShowAndFix(row.nns_id, row.nns_state, false)"
              >
                <span>编辑</span>
              </YlButton>

              <YlButton
                v-if="canWrite === false || row.nns_state === 2 || row.nns_state === 3 || row.nns_state === 4"
                uiType="main"
                @click="handleShowAndFix(row.nns_id, row.nns_state, true)"
              >
                <span>查看</span>
              </YlButton>

              <YlButton
                uiType="main"
                btnType="danger"
                v-if="row.nns_state === 0 || row.nns_state === 5"
                @click="handleDelete(row.nns_id)"
              >
                <span>删除</span>
              </YlButton>
            </template>
          </template>

        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  cardFormConfigValue
} from '@/middleware/index'
import {
  ruleNumber,
  ruleMoney
} from '@/utils/formRule'
import {
  getPrjState,
  getProjectKind
} from '@/utils/prjState'
export default {
  data () {
    return {
      loading: false,
      canWrite: false,
      id: '',
      tableData: [],
      configList: [
        {
          title: '父级项目信息',
          isFormList: false,
          pageHeader: true,
          prjStateConfig: {
            prjState: {},
            auditLog: []
          },
          formConfig: {
            class: 'yl-form-item-inline__content',
            formData: {
              nns_code: '',
              nns_name: '',
              nns_kind: ''
            },
            columns: [
              {
                type: 'input',
                label: '父级项目编号',
                prop: 'nns_code',
                disabled: true,
                spanWidth: 8
              },
              {
                type: 'input',
                label: '父级项目名称',
                prop: 'nns_name',
                disabled: true,
                spanWidth: 8
              },
              {
                type: 'input',
                label: '父级项目类型',
                prop: 'nns_kind',
                disabled: true,
                spanWidth: 8
              }
            ]
          }
        },
        {
          title: '预算填报',
          isFormList: true,
          formConfig: {
            class: 'yl-form-item-inline__content',
            changeId: '',
            btnMethod: ['submit', 'cancel'],
            formData: {
              parent_id: '',
              budget_stage_id: '',
              name: '',
              number: '',
              kind: '',
              money: '',
              uploader_id: '',
              additional_file: '',
              additional_content: '',
              additional_file_url: ''
            },
            editRules: {
              name: [
                { required: true, message: '请输入预算项目名称', trigger: 'blur' }
              ],
              number: [
                { required: true, validator: ruleNumber, trigger: 'blur' }
              ],
              kind: [
                { required: true, message: '请选择项目类型', trigger: 'change' }
              ],
              money: [
                { required: true, validator: ruleMoney, trigger: 'blur' }
              ],
              uploader_id: [
                { required: true, message: '请选择上传者', trigger: 'change' }
              ]
            },
            columns: [
              {
                type: 'input',
                label: '预算项目名称',
                prop: 'name',
                spanWidth: 12
              },
              {
                type: 'input',
                label: '数量',
                prop: 'number',
                spanWidth: 12
              },
              {
                type: 'select',
                label: '项目类型',
                prop: 'kind',
                spanWidth: 12,
                options: [
                  { value: 1, label: '行政' },
                  { value: 2, label: '教学' }
                ]
              },
              {
                type: 'input',
                label: '预算项目金额',
                prop: 'money',
                spanWidth: 12
              },
              {
                type: 'select',
                label: '申报人',
                prop: 'uploader_id',
                spanWidth: 12,
                options: []
              },
              {
                type: 'upload',
                isNormal: true,
                listType: '',
                action: this.GLOBAL.HTTP_URL + '/resource/upload',
                limit: 1,
                accept: '.xlsx, .xls',
                spanWidth: 24,
                label: '附加文件',
                prop: 'additional_file'
              },
              {
                type: 'textarea',
                label: '附加信息',
                prop: 'additional_content'
              }
            ],
            addApi: 'this.$ylapi.addNewBudgetPage',
            changeApi: 'this.$ylapi.changeBudgetWrite'
          }
        }
      ]
    }
  },
  created () {
    // eslint-disable-next-line no-eval
    this.canWrite = eval(this.$route.query.canWrite)
    this.id = this.$route.query.id
    this.initTree()
  },

  methods: {
    // 金额初始化
    showMoney (value) {
      let num = value
      if (typeof value !== 'number') {
        num = Number.parseFloat(num)
      }
      return num.toFixed(2) + '元'
    },
    // 初始化列表
    initTree () {
      this.loading = true
      this.initData()
      this.getUploaderList()
    },

    // 初始化数据
    async initData () {
      let data = await this.$ylapi.getFillTree({
        'stage_id': this.id
      })
      this.tableData = data
      this.loading = false
    },

    // 获取申报人列表
    async getUploaderList () {
      let data = await this.$ylapi.getUploaderList()
      let arr = []
      for (let i in data) {
        arr.push({
          value: data[i].nns_account,
          label: data[i].nns_name + '-' + data[i].nns_department
        })
      }
      this.configList[1].formConfig.columns[4].options = arr
    },

    // 提交 撤回功能
    async handleMethod (id, op) {
      // eslint-disable-next-line no-unused-expressions
      await this.$modal.confirm(this, {
        // eslint-disable-next-line eqeqeq
        warning: `是否确定${op == 1 ? '提交' : '撤回'}当前项目?`,
        obj: { id, op },
        api: this.$ylapi.resolveOrReject
      })
        ? this.initTree()
        : ''
    },

    // 删除单个项目
    async handleDelete (id) {
      // eslint-disable-next-line no-unused-expressions
      await this.$modal.confirm(this, {
        api: this.$ylapi.deleteWritePrj,
        obj: id
      })
        ? this.initTree()
        : ''
    },

    // 修改及查看回显
    async handleShowAndFix (id, state, isShow) {
      let { self, parent, audit_log } = await this.$ylapi.getLastProjectInfo(id)
      this.configList[1].formConfig.changeId = id
      this.configList[1].formConfig.btnMethod = ['save', 'cancel']
      this.configList[0].prjStateConfig.prjState = getPrjState(state)
      this.configList[0].prjStateConfig.auditLog = audit_log
      if (isShow) {
        this.configList[1].isFormList = false
        this.configList[1].formDisabled = true
      }
      // 父级信息及对应
      let parentInfo = {
        'nns_code': parent.nns_code,
        'nns_name': parent.nns_name,
        'nns_kind': getProjectKind(parent.nns_kind)
      }
      cardFormConfigValue(this.configList, parentInfo, 0)
      // 个人信息及对应
      let selfInfo = {
        'name': self.nns_name,
        'number': self.nns_number,
        'kind': self.nns_kind,
        'money': this.formatMoney(self.nns_money, 'yuan'),
        'uploader_id': self.nns_uploader_id,
        'additional_file': self.nns_additional_file,
        'additional_content': self.nns_additional_content,
        'additional_file_url': self.nns_additional_file_url
      }
      cardFormConfigValue(this.configList, selfInfo, 1)
      let query = {
        'configList': this.configList
      }
      console.log(this.configList)
      this.$router.push({
        path: `/writePage/${id}`,
        query: {
          data: JSON.stringify(query)
        }
      })
    },

    // 填报界面
    // eslint-disable-next-line camelcase
    toWritePage ({ nns_id, nns_code, nns_name, nns_kind }) {
      this.configList[1].formConfig.formData.budget_stage_id = this.id
      this.configList[1].formConfig.formData.parent_id = nns_id
      let query = {
        'configList': this.configList
      }
      let obj = {
        'nns_code': nns_code,
        'nns_name': nns_name,
        'nns_kind': getProjectKind(nns_kind)
      }
      console.log(this.configList)
      cardFormConfigValue(this.configList, obj, 0)
      this.$router.push({
        path: `/writePage/${nns_id}`,
        query: {
          data: JSON.stringify(query)
        }
      })
    }
  }
}
</script>
